<template>
	<view>
		<uni-nav-bar :border="false" dark title="回放" fixed :statusBar="true" left-icon="left" @clickLeft="onLeft">
		</uni-nav-bar>
		<view>
			<video id="jswebrtc" :src="videoSrc" controls style="width: 100%; height: 300px; object-fit: fill;">
			</video>
			<view class="speed-controls">
				<view class="s1">播放速度：</view>
				<view class="s2">
					<button @click="setSpeed(0.5)">0.5x</button>
					<button @click="setSpeed(0.75)">0.75x</button>
					<button @click="setSpeed(1.0)">1.0x</button>
					<button @click="setSpeed(1.25)">1.25x</button>
					<button @click="setSpeed(1.5)">1.5x</button>
					<button @click="setSpeed(2.0)">2.0x</button>
				</view>
			</view>
			<uni-section title="直播回看操作面板">
				<uni-list>
					<uni-list-item title="单位:秒">
						<template v-slot:footer>
							90<cuPrpgeress activeColor="#547b44" :min="90" max="1200" handleSize="20px"
								@dragged="dragged"></cuPrpgeress>1200
						</template>
					</uni-list-item>
					<uni-list-item title="当前移动的时间" :rightText="timeData" />
				</uni-list>
			</uni-section>

		</view>
	</view>
</template>

<script>
	import "@/static/jswebrtc.min.js";
	import {
		getliverul
	} from '@/api/tournament/index.js'
	import cuPrpgeress from '@/components/cu-progress/cu-progress.vue'
	export default {
		components: {
			cuPrpgeress
		},
		data() {
			return {
				playCode: '',
				url: '',
				timeData: '90',
				//
				videoSrc: '',
				hls: null,
				videoContext: null
			}
		},
		onUnload() {
			if (this.hls) {
				this.hls.destroy() // 销毁 Hls 实例，避免内存泄漏
			}
		},
		methods: {
			setSpeed(speed) {
				if (this.videoContext) {
					this.videoContext.playbackRate(speed);
				}
			},
			initVideo(url) {
				this.$nextTick(() => {
					let videoElement = document.querySelector("#jswebrtc video");
					console.log(videoElement.src, this.videoSrc);
					this.hls = new Hls();
					this.hls.loadSource(this.videoSrc);
					this.hls.attachMedia(document.querySelector(`#jswebrtc video`));

					this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
						// uni.createVideoContext(`jswebrtc`, this).play();
						this.videoContext = uni.createVideoContext(`jswebrtc`, this)
						this.videoContext.play();
						this.videoContext.playbackRate(1.0); // 设置初始速度          
					});
					this.hls.on(Hls.Events.ERROR, function(event, data) {
						// alert(2)
						console.error("HLS error:", data);
						if (data.details === "manifestLoadError") {
							// 处理 Manifest 加载错误
						}
					});
				});
			},
			//
			onLeft() {
				uni.navigateBack()
			},
			dragged(data) {
				// console.log(data);
				let {
					value
				} = data;
				console.log(value);
				// this.url = this.playCode + '&txTimeshift=on&tsDelay=' + value
				this.timeData = value.toString()
				this.videoSrc = this.playCode + '&txTimeshift=on&tsDelay=' + value
				this.initVideo();
			},
		},
		onLoad({
			id
		}) {
			let currentDateTime = new Date(new Date().getTime() + 86400000);
			console.log('currentDateTime', currentDateTime)
			getliverul(id).then(res => {
				this.playCode = res.rows[0].viewUrl
				// this.url = this.playCode + '&txTimeshift=on&tsDelay=90'

				this.videoSrc = this.playCode + '&txTimeshift=on&tsDelay=90'
				this.initVideo();
			})
		}
	}
</script>

<style scoped lang="scss">
	.speed-controls {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		background: #fff;

		.s1 {
			color: #333;
			font-size: 26rpx;
		}

		.s2 {
			display: flex;
			justify-content: space-between;

			button {
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #666;
				border-radius: 8rpx;
				font-size: 24rpx;
				margin-right: 20rpx;
				width: 80rpx;
			}
		}
	}
</style>